<template>
  <div id="assets-library-object3d">
    <n-alert type="info" :bordered="false" closable class="mb-2 mx-2">
      {{ "拖拽或双击添加至场景中" }}
    </n-alert>

    <div class="cards">
      <n-card
        size="small"
        hoverable
        v-for="item in objectList"
        :key="item.key"
        @dblclick="addToScene(item.key)"
        draggable="true"
        @dragstart="dragStart($event, item.key)"
        @dragend="dragEnd"
      >
        <template #cover>
          <img :src="item.img" :alt="item.name" draggable="false" />
        </template>
        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger> {{ item.name }}</template>
          <span> {{ item.name }} </span>
        </n-tooltip>
      </n-card>
    </div>
  </div>
</template>

<script setup>
import { BasicObject3D } from "@/core/objects/basicObject3D";
import { t, cpt } from "@/language";
import { useDragStore } from "@/store/modules/drag";
import { screenToWorld } from "@/utils/common/scenes";

const objectList = [
  //配图使用平行光灯光颜色 rgb(35,49,221)
  {
    key: "group",
    img: "/static/images/assetsLibrary/object3d/group.png",
    name: "组",
  },
  {
    key: "sprite",
    img: "/static/images/assetsLibrary/object3d/sprite.png",
    name: "精灵",
  },
  {
    key: "tube",
    img: "/static/images/assetsLibrary/object3d/sTube.png",
    name: "直管",
  },
  {
    key: "wanTube",
    img: "/static/images/assetsLibrary/object3d/wanTube.png",
    name: "直角弯管",
  },
  {
    key: "box",
    img: "/static/images/assetsLibrary/object3d/box.png",
    name: "正方体",
  },
  {
    key: "circle",
    img: "/static/images/assetsLibrary/object3d/circle.png",
    name: "圆",
  },
  {
    key: "cylinder",
    img: "/static/images/assetsLibrary/object3d/cylinder.png",
    name: "圆柱体",
  },
  {
    key: "sphere",
    img: "/static/images/assetsLibrary/object3d/sphere.png",
    name: "球体",
  },
  {
    key: "torus",
    img: "/static/images/assetsLibrary/object3d/torus.png",
    name: "圆环体",
  },
  {
    key: "plane",
    img: "/static/images/assetsLibrary/object3d/plane.png",
    name: "平面",
  },
  {
    key: "ring",
    img: "/static/images/assetsLibrary/object3d/ring.png",
    name: "环",
  },
  {
    key: "tetrahedron",
    img: "/static/images/assetsLibrary/object3d/tetrahedron.png",
    name: "四面体",
  },
  {
    key: "octahedron",
    img: "/static/images/assetsLibrary/object3d/octahedron.png",
    name: "八面体",
  },
  {
    key: "dodecahedron",
    img: "/static/images/assetsLibrary/object3d/dodecahedron.png",
    name: "十二面体",
  },
  {
    key: "icosahedron",
    img: "/static/images/assetsLibrary/object3d/icosahedron.png",
    name: "二十面体",
  },
  {
    key: "capsule",
    img: "/static/images/assetsLibrary/object3d/capsule.png",
    name: "胶囊",
  },
  {
    key: "doubleCone",
    img: "/static/images/assetsLibrary/object3d/doubleCone.png",
    name: "双锥",
  },
  {
    key: "torusKnot",
    img: "/static/images/assetsLibrary/object3d/torusKnot.png",
    name: "环面扭结体",
  },
  {
    key: "teapot",
    img: "/static/images/assetsLibrary/object3d/teapot.png",
    name: "茶壶",
  },
];

let basicObject3D = new BasicObject3D();

//双击添加至场景..
function addToScene(key) {
  basicObject3D.init(key);
}

// 开始拖拽事件
const dragStore = useDragStore();

function dragStart(e, key) {
  dragStore.setData(key);
}

function dragEnd() {
  if (
    dragStore.getActionTarget !== "addToScene" ||
    dragStore.endArea !== "Scene"
  )
    return;

  const position = screenToWorld(
    dragStore.endPosition.x,
    dragStore.endPosition.y
  );
  basicObject3D.init(dragStore.getData, { position: position });
  dragStore.setActionTarget("");
}
</script>

<style scoped lang="less">
#assets-library-object3d {
  overflow-x: hidden;

  .cards {
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px 8px;
  }

  .n-card {
    cursor: pointer;

    .n-image {
      display: block;
    }

    :deep(.n-card-cover) {
      img {
        height: 85px;
      }
    }

    :deep(.n-card__content) {
      padding: 3px 0;
      font-size: 13px;
      text-align: center;
    }
  }
}
</style>
